<template>
	<view>
		<!-- 首页 -->
		<view class="homepage" v-show="tabbarindex == 0">
			<view class="top w100 h-210 text-center padding-top-150 fff">
				首页
			</view>

			<view class="swiper w100">
				<u-swiper indicator :list="indexdata.bannerList" previousMargin="30" nextMargin="30" circular
					:autoplay="false" radius="5" keyName="adimage"></u-swiper>
			</view>

			<view class="padding-left-30 padding-right-30">
				<view class="" @click="goparse(24)">
					<u-notice-bar :text="indexdata.noticeList" mode="link" direction="column"></u-notice-bar>
				</view>


				<!-- 回收地址 -->
				<view class="address w100 padding-30 margin-top-30 radius-15 ">
					<view class="flex-between">
						<view class="one">
							<view class="flex">
								<view class="w-150 font-weight-500">
									{{indexdata.receive.name}}
								</view>
								<view class="color_hui font-24">
									{{indexdata.receive.phone}}
								</view>
							</view>

							<view class="padding-top-20 color_hui font-24">
								{{indexdata.receive.address}}
							</view>
						</view>

						<view class="flex-center">
							<view class="shu w-6 h-80">

							</view>

							<view class="copy padding-left-60 font-20" @click="copyText">
								复制回收地址
							</view>
						</view>
					</view>

					<view class="w100 padding-25 two margin-top-30 radius-10 flex-between">
						<view class="">
							<view class="font-weight-500">
								回收品类
							</view>

							<view class="color_hui font-24 padding-top-10">
								行业高价支持寄存
							</view>

							<view class="padding-top-20">
								<u-button type="primary" shape="circle" text="去报单 >"
									color="linear-gradient(to right, rgb(213, 51, 186), rgb(252,154,48))"></u-button>
							</view>
						</view>

						<view class="">
							<view class="flex-between">
								<view class="">

								</view>
							</view>

							<view class="flex-between">
								<view class="">

								</view>
							</view>
						</view>
					</view>

				</view>

				<!-- 回收流程 -->
				<view class="process w100 padding-30 margin-top-30 radius-15">
					<view class="font-weight-500">
						回收流程
					</view>

					<view class="">

					</view>

					<view class="padding-top-25">
						<u-collapse @change="change" @close="close" @open="open">
							<u-collapse-item :title="item.title" name="Docs guide"
								v-for="(item,index) in indexdata.processList" :key="index">
								<text class="u-collapse-content">{{item.content}}</text>
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>
			</view>
		</view>

		<!-- 回收价 -->
		<view class="recycle" v-show="tabbarindex == 1">
			<view class="top w100">
				<view class="w100 text-center padding-top-120">
					回收参考价
				</view>

				<view class="flex-between padding-top-50 padding-left-30 padding-right-30">
					<view class="w-500">
						<u-search placeholder="输入关键字" v-model="keyword" :showAction="false"></u-search>
					</view>

					<view class="w-120 h-55 lh-55 radius-50 search fff text-center font-24">
						搜索
					</view>
				</view>

				<view class="padding-top-20">
					<u-tabs :list="tablist" @click="tabclick"></u-tabs>
				</view>
			</view>

			<view class="w100 flex-between h-1400 margin-top-20">
				<view class="shop_left h100">
					<scroll-view scroll-y class="w100 h100" scroll-with-animation style="overflow: hidden;"
						@scrolltolower="">

						<view class="w100 h-100 margin-bottom-10" v-for="(item,index) in recyleTwoList" :key="index">
							<view class="w100 h-100 lh-100 font-24 one-line padding-left-20 padding-right-20 overhid">
								{{item.name}}111111111
							</view>
						</view>

						<view class="w100 h-300">

						</view>

					</scroll-view>
				</view>

				<view class="shop_right h100">
					<scroll-view scroll-y class="w100 h100" scroll-with-animation style="overflow: hidden;"
						@scrolltolower="">

						<view class="w100 h-100 margin-bottom-10" v-for="(item,index) in 20" :key="index">
							<view class="w100 h-100 flex-center">
								123
							</view>
						</view>

						<view class="w100 h-300">

						</view>

					</scroll-view>
				</view>

			</view>

		</view>

		<!-- 我的 -->
		<view class="my" v-show="tabbarindex == 2">
			<view class="top w100 h-600">
				<view class="text-center padding-top-120 padding-bottom-20">
					我的
				</view>

				<view class="flex alc padding-40">
					<view class="w-150 h-150 radius-75" style="background-color: red;">

					</view>

					<view class="padding-left-30">
						<view class="font-weight-500 font-43">
							139592616515
						</view>
						<view class="font-26 color_hui padding-top-5">
							数码产品发烧友
						</view>
					</view>
				</view>

				<view class="flex-between padding-top-50 padding-left-30 padding-right-30 ">
					<view class="w-200 text-center">
						<view class="font-weight-500 font-44">
							0
						</view>
						<view class="padding-top-20">
							寄件数
						</view>
					</view>

					<view class="w-200 text-center">
						<view class="font-weight-500 font-44">
							0
						</view>
						<view class="padding-top-20">
							寄件数
						</view>
					</view>

					<view class="w-200 text-center">
						<view class="font-weight-500 font-44">
							0
						</view>
						<view class="padding-top-20">
							寄件数
						</view>
					</view>
				</view>

			</view>

			<view class="padding-left-20 padding-right-20 margin-top-30">
				<view class="sell w100 padding-20 radius-15">
					<view class="font-weight-500 font-26">
						我卖出的
					</view>

					<view class="flex-between padding-top-20 font-24 color_hui padding-bottom-10">
						<view class="text-center">
							待出货
						</view>
						<view class="">
							待结算
						</view>
						<view class="">
							已结算
						</view>
						<view class="">
							退货
						</view>
					</view>

				</view>

				<view class="margin-top-30 sell w100 font-26 color_hui radius-15">

					<view class="flex-between padding-25">
						<view class="">
							我的报单
						</view>

						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<u-gap height="2" bgColor="#F6F6F6"></u-gap>

					<view class="flex-between padding-25">
						<view class="">
							我的报单
						</view>

						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<u-gap height="2" bgColor="#F6F6F6"></u-gap>

					<view class="flex-between padding-25">
						<view class="">
							我的报单
						</view>

						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

				</view>
			</view>



		</view>

		<!-- tabbar -->
		<view class="w100 tabbar flex-between font-24">
			<view class="" v-for="(item,index) in tabbars" :key="index" @click="tabbaron(index)"
				:class="tabbarindex==index?'black-color':'color_hui'">
				{{item.name}}
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				tabbarindex: 1,
				tabbars: [{
						name: '首页',
						url: ''
					},
					{
						name: '回收价',
						url: ''
					},
					{
						name: '我的',
						url: ''
					}
				],
				tablist: {},
				indexdata: {
					receive: {
						name: "张三",
						phone: "18866668888",
						address: "顶顶顶顶顶顶顶"
					}
				},
				noticetext: {},
				recyleTwoPage: 1,
				recyleTwoList: {},
				GoodsListPage: 1
			}
		},
		onLoad(i) {

		},
		onShow() {
			this.homeData()
			this.getCategoryOne()

			this.recyleTwoPage = 1
		},
		methods: {
			// 商品列表
			async getGoodsList(id) {
				let _this = this
				let item = await this.$api.post('Recycle/getGoodsList', {
					token: uni.getStorageSync('token'),
					page: _this.GoodsListPage,
					limit: 30,
					pid: id
				})
				this.recyleTwoList = this.recyleTwoList.concat(item.data.list)
			},
			// 回收 --- 二级分类
			async getCategoryTwo(id) {
				let _this = this
				let item = await this.$api.post('Recycle/getCategory', {
					token: uni.getStorageSync('token'),
					page: 1,
					limit: 999,
					pid: id
				})
				this.recyleTwoList = item.data.list
				this.getGoodsList(item.data.list[0].id)
			},
			// 回收 --- 一级分类
			async getCategoryOne() {
				let _this = this
				let item = await this.$api.post('Recycle/getCategory', {
					token: uni.getStorageSync('token'),
					page: 1,
					limit: 999,
					pid: 0
				})
				this.tablist = item.data.list
				this.getCategoryTwo(item.data.list[0].id)

			},
			//复制地址
			copyText() {
				let _this = this,
					data = _this.indexdata.receive
				uni.setClipboardData({
					data: data.name + "    " + data.phone + "    " + data.address,
					showToast: false,
					success: function() {
						console.log('success');
						uni.hideToast()
						uni.showToast({
							title: '复制成功',
						})
					}
				});
			},
			goparse(id) {
				console.log(132123)
				uni.navigateTo({
					url: '/pagesA/recycle/parse?id=' + id
				})
			},
			// 首页请求接口
			async homeData() {
				let _this = this
				let item = await this.$api.post('Recycle/homeData', {
					token: uni.getStorageSync('token'),
				})
				this.indexdata = item.data

			},
			tabbaron(e) {
				this.tabbarindex = e
			},
			tabclick(item) {
				console.log(item.id);
				this.getCategoryTwo(item.id)
			}
		},

	}
</script>

<style lang="less" scoped>
	.my {
		.top {
			background: linear-gradient(to bottom, rgba(255, 132, 0, .3), rgba(255, 132, 0, .1));
		}

		.sell {
			background-color: #fff;
		}
	}

	.recycle {
		.top {
			background-color: #fff;

			.search {
				background-color: #3874F6;
			}
		}

		.shop_left {
			width: 25%;
			background-color: #fff;
		}

		.shop_right {
			width: 73%;
			background-color: #fff;
		}
	}

	.tabbar {
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 4rpx solid #eee;
		padding: 0 100rpx;
	}

	.color_hui {
		color: #7B7B7B;
	}


	.homepage {
		.top {
			background-color: rgba(255, 132, 0, .8);
		}

		.swiper {
			padding: 50rpx 0rpx;
			// background-color: #fff;
		}

		.address {
			background-color: #fff;

			.one {
				max-width: 400rpx;
			}

			.two {
				background-color: rgba(255, 132, 0, .1);
			}

			.shu {
				background-color: #EFEFEF;
				min-width: 6rpx;
			}

			.copy {
				min-width: 150rpx;
			}
		}

		.process {
			background-color: #fff;
		}
	}
</style>